로딩 시점:
window.onload: 이벤트가 발생하는 시점은 전체 문서, 이미지, 스타일시트, 스크립트 및 기타 리소스가 모두 로드되고 페이지의 모든 하위 자원들이 준비된 후입니다. 즉, 페이지의 모든 리소스가 완전히 로드된 후에 실행됩니다.document.addEventListener('DOMContentLoaded', function() {}): 이벤트가 발생하는 시점은 HTML 문서의 파싱이 완료되고 DOM 트리가 완성되었지만 외부 리소스(이미지, 스타일시트, 외부 스크립트 등)의 로딩이 완료되지 않은 상태입니다. 따라서 스타일시트, 이미지 및 외부 스크립트 등을 기다리지 않고도 실행됩니다.로딩 속도와 성능:
window.onload: 모든 리소스가 로드되기를 기다리므로 페이지가 완전히 로드되는데 시간이 오래 걸릴 수 있습니다. 이는 페이지가 모든 리소스를 기다리기 때문에 사용자에게 페이지가 완전히 로드되기 전까지는 아무 것도 보여지지 않는 '대기 시간'이 발생할 수 있습니다.document.addEventListener('DOMContentLoaded', function() {}): 이벤트가 더 빨리 발생하므로 페이지가 빠르게 사용자에게 표시됩니다. 외부 리소스의 로딩이 완료되지 않은 상태에서도 스크립트를 실행할 수 있으므로 사용자 경험을 개선할 수 있습니다.따라서 일반적으로 페이지의 초기화를 위한 코드나 사용자 인터랙션에 필요한 작업을 수행하는 경우 DOMContentLoaded 이벤트를 사용하는 것이 좋습니다. 페이지의 모든 리소스가 로드되어야 하는 경우에만 window.onload를 사용하면 됩니다.
